<template>
  <div class="home">
    <!-- 图片 -->
    <img src="../../assets//images/1.jpg" width="100%" alt="" />
    <!-- 点击进入城市选择 -->
    <router-link class="selectCity" to="/selectCity">
      查看{{ city }}
    </router-link>
    <!-- 病毒信息 -->
    <CovInfo :covDesc="covDesc" :news="news" />
    <!-- 3. 疫情-小导航 -->
    <div class="list">
      <div>
        <router-link to="/area">
          <img src="../../assets/images/1.png" alt="" />
          <div>风险地区</div>
        </router-link>
      </div>
      <div>
        <router-link to="/hesuan">
          <img src="../../assets/images/2.png" alt="" />
          <div>核算检测</div>
        </router-link>
      </div>
      <div>
        <router-link to="/prevention">
          <img src="../../assets/images/3.png" alt="" />
          <div>防疫物资</div>
        </router-link>
      </div>
      <div>
        <router-link to="/travel">
          <img src="../../assets/images/4.png" alt="" />
          <div>出行政策</div>
        </router-link>
      </div>
    </div>
    <!-- 4.数据统计 -->
    <CovNumber :covData="covData" />
    <!-- 5.中国地图 -->
    <ChinaMap />
    <!-- 6.世界地图 -->
    <WorldMap />
    <!-- 7.轮播图 -->
    <VueSwiper />
  </div>
</template>

<script>
import CovInfo from "./CovInfo/CovInfo.vue";
import CovNumber from "./CovInfo/CovNumber.vue";
import ChinaMap from "./VueEcharts/ChinaMap.vue";
import WorldMap from "./VueEcharts/WorldMap.vue";
import VueSwiper from "./VueSwiper/VueSwiper.vue";
import api from "../../api";
export default {
  name: "Home",
  data() {
    return {
      covDesc: {},
      covData: {}, //全国数据统计
      news: [],
      city: "国内疫情",
    };
  },
  components: {
    CovInfo,
    CovNumber,
    ChinaMap,
    WorldMap,
    VueSwiper,
  },
  created() {
    document.documentElement.scrollTop = 0;
    // 方式1：进入页面获取本地存储
    let city = localStorage.getItem("city");
    // console.log(city);
    if (city) {
      this.city = city + "疫情";
    }
    // 请求病毒接口
    api.getCovInfo().then((res) => {
      // console.log(res.data);
      // console.log(res.data.newslist[0].desc);
      //1.病毒信息介绍---
      this.covDesc = {
        note1: "病毒:SARS-Cov-2，其导致疾病命名COVID-19",
        note2: "传染源:新冠肺炎的患者。无症状感染者也可能成为传染源。",
        note3:
          "传播途径:经呼吸道飞沫﹑接触传播是主要的传播途径。气溶胶传播和消化道等传播途径尚待明确。",
        remark1:
          "易感人群:人群普遍易感。老年人及有基础疾病者感染后病情较重，儿童及婴幼儿也有发病",
        remark2:
          "潜伏期:一般为3~7天，最长不超过14天，潜伏期内可能存在传染性，其中无症状病例传染性非常罕见",
        remark3: "宿主:野生动物，可能为中华菊头蝠",
      };
      //2. 疫情热点
      this.news = res.data.newslist[0].news;
      //3. 全国疫情的数据统计信息---
      let data = res.data.newslist[0].desc;
      this.covData = {
        currentConfirmedCount: data.currentConfirmedCount,
        confirmedCount: data.confirmedCount,
        suspectedCount: data.suspectedCount,
        curedCount: data.curedCount,
        deadCount: data.deadCount,
        seriousCount: data.seriousCount,
        suspectedIncr: data.foreignStatistics.suspectedIncr,
        currentConfirmedIncr: data.foreignStatistics.currentConfirmedIncr,
        confirmedIncr: data.foreignStatistics.confirmedIncr,
        curedIncr: data.foreignStatistics.curedIncr,
        deadIncr: data.foreignStatistics.deadIncr,
        seriousIncr: data.foreignStatistics.seriousIncr,
        modifyTime: data.modifyTime,
      };
    });
    /**
            currentConfirmedCount 现存确诊
            confirmedCount  累计确诊
            suspectedCount  累计境外输入人数
            curedCount    累计治愈人数
            deadCount   累计死亡人数
            seriousCount  现存无症状人数
            suspectedIncr  新增境外输入人数
            currentConfirmedIncr   相比昨日现存确诊人数
            confirmedIncr  相比昨日累计确诊人数
            curedIncr   相比昨日新增治愈人数
            deadIncr  相比昨日新增死亡人数
            seriousIncr 相比昨日现存无症状人数

              modifyTime 时间
             
             */
  },
};
</script>

<style lang="less" scoped>
.selectCity {
  position: absolute;
  background-color: #f7f7f7cc;
  top: 1.3rem;
  right: 0.2rem;
  padding: 0.2rem;
  border-radius: 0.48rem;
  font-size: 0.2rem;
}

.list {
  display: flex;
  padding-bottom: 0.2rem;
  > div {
    flex: 1;
    text-align: center;
    color: #666;
    img {
      width: 0.8rem;
      height: 0.8rem;
    }
  }
}
</style>
